<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>菜单管理 - 后台管理系统模板</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="菜单管理">
    <meta name="description" content="菜单管理页">
    <meta name="author" content="yinqi">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <link href="/common/libs/materialdesignicons/materialdesignicons.min.css" rel="stylesheet" type="text/css">
    <link href="/common/libs/fontawesome-free-5.11.2-web/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="/common/libs/bootstrap5.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/common/libs/animate/animate.min.css" rel="stylesheet" type="text/css">
    <link href="/common/libs/jquery-confirm/jquery-confirm.min.css" rel="stylesheet" type="text/css">

    <link href="/common/libs/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" type="text/css">
    <!-- fontIconPicker core CSS -->
    <link href="/common/libs/fontIconPicker/css/jquery.fonticonpicker.min.css" rel="stylesheet" type="text/css" />
    <!-- required default theme -->
    <link href="/common/libs/fontIconPicker/themes/grey-theme/jquery.fonticonpicker.grey.min.css" rel="stylesheet" type="text/css" />
    <link href="/common/libs/jquery-tagsinput/jquery.tagsinput.min.css" rel="stylesheet" type="text/css">
    <link href="/system/css/style.min.css" rel="stylesheet" type="text/css">


    <style>
        .lyear-dropdown-tree {
            position: relative;
            flex:1 1 0%;
        }
        .lyear-dropdown-tree .checkbox-box,
        .lyear-dropdown-tree .radio-box {
            font-size: 15px;
            cursor: pointer;
        }
        .lyear-dropdown-tree .arrow {
            margin-left: -15px;
        }
        .lyear-dropdown-tree .checkbox-box:before {
            content: "\F131";
        }
        .lyear-dropdown-tree .checkbox-box.lyear-dropdown-tree-checked:before {
            content: "\F135";
        }
        .lyear-dropdown-tree .checkbox-box.lyear-dropdown-tree-half-checked:before {
            content: "\F6F1";
        }
        .lyear-dropdown-tree .radio-box:before {
            content: "\F130";
        }
        .lyear-dropdown-tree .radio-box.lyear-dropdown-tree-checked:before {
            content: "\F134";
        }
        .lyear-dropdown-tree .radio-box.lyear-dropdown-tree-half-checked:before {
            content: "\F377";
        }
        .lyear-dropdown-tree .dropdown-menu {
            min-width: 100%;
            overflow-y: auto;
            overflow-x: auto;
            padding-bottom: 13px;
        }
        .lyear-dropdown-tree .dropdown-menu > li {
            margin-left:  15px;
        }
        .lyear-dropdown-tree .dropdown-menu li ul {
            list-style: none;
            padding-left: 25px;
        }
        .lyear-dropdown-tree .dropdown-menu li ul a {
            clear: both;
            font-weight: 400;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
            padding: 3px 20px;
        }
        .lyear-dropdown-tree .dropdown-menu li a {
            display: inline-block;
            padding-left: 15px!important;
            width: auto;
        }
        .lyear-dropdown-tree .dropdown-menu li a.lyear-dropdown-tree-a-checked {
            color: #33cabb;
        }
        .lyear-dropdown-tree .dropdown-menu a:hover,
        .lyear-dropdown-tree .dropdown-menu a:active,
        .lyear-dropdown-tree .dropdown-menu a:focus {
            background-color: transparent;
        }
        .lyear-dropdown-tree .form-control {
            padding-right: 30px;
            cursor: pointer;
        }
        .lyear-dropdown-tree i.lyear-cert {
            font-size: 20px;
            position: absolute;
            top: 3px;
            right: 5px;
        }
        /*bootstrap-select插件用到的，也可以不用*/
        .bootstrap-select.open .dropdown-toggle {
            border-color: #33cabb!important;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(51, 202, 187, .6);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(51, 202, 187, .6);
        }
        .bootstrap-select.open .dropdown-menu.open {
            border: 1px solid #ebebeb;
        }
        /*示例二、三、四、五*/
        .p-t-5 {
            padding-top: 5px;
        }
        /*示例五*/
        .input-group-controls {
            height: 36px;
            flex: 1 1 0%;
            border: 1px solid #F2F3F3;
            padding-left: 15px;
        }
        @media (min-width: 576px){
            .modal-dialog {
                max-width: 1050px;
            }
        }
    </style>
</head>
<body>
<!-- 模态框-开始 -->
<!--标签插件-->
<div class="modal fade" id="addPostModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalGridTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="exampleModalGridTitle">新增书籍</h6>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row no-gutters">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <form action="#!" method="post" class="row no-gutters" id="postAddForm">
                                    <div class="col-9 no-gutters">
                                        <div class="form-group col-md-12">
                                            <label for="title">标题</label>
                                            <input type="text" class="form-control" id="title" name="title" value="" placeholder="请输入标题" />
                                            <input type="hidden" name="id" id="id"/>
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label for="seo_keywords">类目id</label>
                                            <input type="text" class="form-control" id="categoryId" name="categoryId" value="" placeholder="关键词" />
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label for="seo_keywords">作者id</label>
                                            <input type="text" class="form-control" id="authorId" name="authorId" value="" placeholder="关键词" />
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label for="seo_keywords">关键词</label>
                                            <input type="text" class="form-control" id="seoKeywords" name="keywords" value="" placeholder="关键词" />
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label for="seo_description">描述</label>
                                            <textarea class="form-control" id="postExcerpt" name="description" rows="5"  placeholder="描述"></textarea>
                                        </div>
                                        <div class="form-group col-md-12 file-group">
                                            <label for="web_site_logo">预览图片</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control file-value" name="coverImage" value="" placeholder="预览图片地址" />
                                                <input type="file" accaccept=".png,.jpg,.jpeg,.bmp,.gif" class="d-none" />
                                                <div class="input-group-append">
                                                    <button class="btn btn-default file-browser" type="button">上传图片</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label for="content">内容</label>
                                            <textarea class="ignore form-control" id="postContent" name="content"   placeholder="文章内容"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="form-group col-12">
                                            <label for="termId">分类</label>
                                            <div class="lyear-dropdown-tree" id="lyear-dropdown-tree">
                                                <input type="text" class="form-control" id="termSelect" name="termSelect" placeholder="请选择文章分类" data-toggle="dropdown">
                                                <input type="hidden" name="categoryIds" id="categoryIds"/>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label for="template">模板</label>
                                            <input type="text" class="form-control" id="template" name="template"  placeholder="模板" />
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label for="tags">标签</label>
                                            <input class="js-tags-input ignore form-control" type="text" id="tags" name="tags"  />
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label for="sort">排序</label>
                                            <input type="number" class="form-control" id="postOrder" name="postOrder" value="0" />
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label for="status">评论状态</label>
                                            <div class="clearfix">
                                                <div class="custom-control custom-radio custom-control-inline">
                                                    <input type="radio" id="statusOne" name="commentStatus" class="custom-control-input" value="closed">
                                                    <label class="custom-control-label" for="statusOne">关闭</label>
                                                </div>
                                                <div class="custom-control custom-radio custom-control-inline">
                                                    <input type="radio" id="statusTwo" name="commentStatus" class="custom-control-input" value="open">
                                                    <label class="custom-control-label" for="statusTwo">开启</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-close" data-bs-dismiss="modal"></button> <!-- 关闭按钮 -->
                <button type="button" class="btn btn-primary"  name="save" id="postAddBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 模态框-结束 -->


<div class="container-fluid p-t-15">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <header class="card-header"><div class="card-title">书籍管理</div></header>
                <div class="card-body">
                    <div id="toolbar" class="toolbar-btn-action">
                        <button id="btn_add" type="button" class="btn btn-primary m-r-5" data-bs-toggle="modal" data-bs-target="#addPostModal">
                            <span class="mdi mdi-plus" aria-hidden="true"></span>新增
                        </button>
                        <button id="btn_delete" type="button" class="btn btn-danger" onclick="deletePosts()">
                            <span class="mdi mdi-window-close" aria-hidden="true"></span>删除
                        </button>
                    </div>
                    <div class="table-responsive">
                        <input ame="categoryId" type="text" id="formInputCategoryId" value="${categoryId}"/>
                        <table class="table text-nowrap" id="postTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/common/libs/jquery/jquery-3.7.1.min.js" type="text/javascript"></script>
<script src="/common/libs/popper/popper.min.js" type="text/javascript"></script>
<script src="/common/libs/bootstrap5.3.2/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/common/libs/perfect-scrollbar/perfect-scrollbar.min.js" type="text/javascript"></script>
<script src="/common/libs/jquery-cookie/jquery.cookie.min.js" type="text/javascript"></script>
<script src="/common/libs/bootstrap-notify/bootstrap-notify.min.js" type="text/javascript"></script>
<script src="/common/libs/jquery-confirm/jquery-confirm.min.js" type="text/javascript"></script>
<script src="/common/libs/lyear-loading/lyear-loading.js" type="text/javascript"></script>
<script src="/system/js/common.js" type="text/javascript"></script>
<script src="/common/libs/jquery-validate/jquery.validate.min.js" type="text/javascript"></script>
<script src="/common/libs/jquery-validate/messages_zh.min.js" type="text/javascript"></script>
<script src="/common/libs/ckeditor5/build/ckeditor.js" type="text/javascript"></script>
<script src="/common/libs/chart/Chart.min.js" type="text/javascript"></script>


<script src="/common/libs/bootstrap-table/bootstrap-table.min.js" type="text/javascript"></script>
<script src="/common/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
<!--标签插件-->
<script src="/common/libs/jquery-tagsinput/jquery.tagsinput.min.js"></script>

<script src="/common/libs/bootstrap-lyear-dropdowntree/bootstrap-lyear-dropdowntree.js" type="text/javascript"></script>
<!-- fontIconPicker JS -->
<script src="/common/libs/fontIconPicker/jquery.fonticonpicker.min.js" type="text/javascript"></script>
<script src="/system/ebook/book/js/book.js" type="text/javascript"></script>
<script src="/system/ebook/book/js/bookAdd.js" type="text/javascript"></script>
<script src="/system/ebook/book/js/bookEdit.js" type="text/javascript"></script>

</body>
</html>